<template>
    <div class="container">
        <div class="form-container">
            <a-form :model="registerForm" layout="vertical" name="normalRegister" class="register-form" @finish="onFinish" @finishFailed="onFinishFailed">
                <h2 style="text-align:center">用户注册</h2>
                <a-form-item label="手机号" name="phone" :rules="[{ required: true, message: '请输入手机号' }]">
                    <a-input v-model:value="registerForm.phone">
                        <template #prefix>
                            <UserOutlined class="site-form-item-icon" />
                        </template>
                    </a-input>
                </a-form-item>

                <a-form-item label="邮箱地址" name="email" :rules="[{ required: true, message: '请输入邮箱地址' }]">
                    <a-input v-model:value="registerForm.email">
                        <template #prefix>
                            <UserOutlined class="site-form-item-icon" />
                        </template>
                    </a-input>
                </a-form-item>
    
                <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入你的密码' }]">
                    <a-input-password v-model:value="registerForm.password">
                        <template #prefix>
                            <LockOutlined class="site-form-item-icon" />
                        </template>
                    </a-input-password>
                </a-form-item>

                <a-form-item label="再次确认密码" name="password" :rules="[{ required: true, message: '请输入你的密码' }]">
                    <a-input-password v-model:value="registerForm.passwordAgain">
                        <template #prefix>
                            <LockOutlined class="site-form-item-icon" />
                        </template>
                    </a-input-password>
                </a-form-item>
                <a-form-item label="验证码" name="verificationCode" :rules="[{ required: true,  message: '请输入邮箱发送的验证码' }]">
                    <a-row>
                        <a-col :span="14"> 
                            <a-input v-model:value="registerForm.verificationCode"></a-input>
                        </a-col>
                        <a-col :span="6"> <!-- 按钮占据 6 份 -->
                            <a-button type="primary" @click="sendCode" style="margin-left:5px ;">发送验证码到邮箱</a-button>
                        </a-col>
                    </a-row>
                </a-form-item>
    
                <a-form-item>
                    <a-button :disabled="disabled" type="primary" html-type="submit" class="register-form-button">
                        立即注册
                    </a-button>
                    <a-checkbox v-model:checked="registerForm.allow">请阅读并同意本系统相关<a href="#"> 隐私政策与协议</a>，并在阅读完后点击同意</a-checkbox>
                </a-form-item>
            </a-form>
        </div>
    
    </div>
</template>
<script setup>
import {
    reactive,
    computed
} from 'vue';
import { sendEmail,register } from '../api/register';


const registerForm = reactive({
    phone: '1111',
    email:'13457387502@163.com',
    password: '1111',
    passwordAgain:'1111',
    allow:false,
    verificationCode:'',
});
const onFinish = values => {
    register(registerForm);
};
const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
};
const disabled = computed(() => {
    return !(registerForm.phone && registerForm.password && registerForm.email && registerForm.passwordAgain && registerForm.allow==true && registerForm.verificationCode);
});

// 自定义第二次输入密码的校验器
// const validatePass = async (_rule, value) => {
//   if (value === '') {
//     return Promise.reject('请再次输入密码');
//   } else if (value !== formState.pass) {
//     return Promise.reject("密码与上行不匹配");
//   } else {
//     return Promise.resolve();
//   }
// };

const sendCode=()=>{
    console.log("邮箱地址"+registerForm.email);
    sendEmail(registerForm.email);
}

</script>

<style scoped>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /* 使用视口高度确保铺满全屏 */
    background-image: url('../assets/image/registerBackground.png');
    background-size: cover;
    /* 使背景图片铺满整个容器 */
    background-position: center;
    /* 背景图片居中显示 */
}

.form-container {
    width: 500px;
    backdrop-filter: blur(10px);
    /* 添加高斯模糊效果 */
    background-color: rgba(255, 255, 255, 0.059);
    /* 设置背景颜色并添加透明度 */
    padding: 20px;
    border-radius: 8px;
    /* 添加圆角 */
}

.register-form {
    max-width: 500px;
}
.register-form-button {
    width: 100%;
}
</style>
